import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { HotAnchorWrapper } from './styled'
import AreaHeaderV2 from '@/components/area-header-v2'
import { hotRadios } from '@/assets/data/local-data'
import { getImgSize } from '@/utils/getImgSize'

interface Iprops {
  children?: ReactNode
}

const HotAnchor: FC<Iprops> = () => {
  return (
    <HotAnchorWrapper>
      <AreaHeaderV2 title="热门主播" />
      <div className="anchors">
        {hotRadios.map((item) => (
          <div className="list" key={item.url}>
            <div className="left">
              <img src={getImgSize(item.picUrl, 40)} alt="" />
            </div>
            <div className="right">
              <span className="name">{item.name}</span>
              <div className="desc">{item.position}</div>
            </div>
          </div>
        ))}
      </div>
    </HotAnchorWrapper>
  )
}
export default memo(HotAnchor)
